<script setup>
import getDate from '@/utils/dateChange.js'

defineProps({
  personInfo: {
    type: Object,
    default: () => ({})
  }
})
</script>

<template>
  <div class="person">
    <el-card style="max-width: 480px">
      <template #header>
        <div class="card-header">
          <span>个人信息</span>
        </div>
      </template>
      <dvi class="avatar">
        <img :src="personInfo.avatar" />
      </dvi>
      <template #footer>
        <div class="info">
          <div class="item">
            <div class="left">
              <el-icon>
                <UserFilled />
              </el-icon>
              <span>用户名称</span>
            </div>
            <span>{{ personInfo.userName }}</span>
          </div>
          <div class="item">
            <div class="left">
              <el-icon>
                <Iphone />
              </el-icon>
              <span>手机号码</span>
            </div>
            <span>{{ personInfo.phonenumber }}</span>
          </div>
          <div class="item">
            <div class="left">
              <svg
                t="1715823119163"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4304"
                width="16"
                height="16"
              >
                <path
                  d="M926.47619 355.644952V780.190476a73.142857 73.142857 0 0 1-73.142857 73.142857H170.666667a73.142857 73.142857 0 0 1-73.142857-73.142857V355.644952l304.103619 257.828572a170.666667 170.666667 0 0 0 220.745142 0L926.47619 355.644952zM853.333333 170.666667a74.044952 74.044952 0 0 1 26.087619 4.778666 72.704 72.704 0 0 1 30.622477 22.186667 73.508571 73.508571 0 0 1 10.678857 17.67619c3.169524 7.509333 5.12 15.652571 5.607619 24.210286L926.47619 243.809524v24.380952L559.469714 581.241905a73.142857 73.142857 0 0 1-91.306666 2.901333l-3.632762-2.925714L97.52381 268.190476v-24.380952a72.899048 72.899048 0 0 1 40.155428-65.292191A72.97219 72.97219 0 0 1 170.666667 170.666667h682.666666z"
                  p-id="4305"
                ></path>
              </svg>
              <span>用户邮箱</span>
            </div>
            <span>{{ personInfo.email }}</span>
          </div>
          <div class="item">
            <div class="left">
              <svg
                t="1715823206551"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5362"
                width="16"
                height="16"
              >
                <path
                  d="M784.30208 866.03776H575.488V626.36032h-126.93504v239.67744H239.69792V656.62976c-22.4256 8.9088-49.54112 2.49856-66.56-16.91648-23.30624-26.54208-23.30624-68.17792 0.02048-94.78144L512.02048 157.98272l338.86208 386.9696c23.26528 26.58304 23.26528 68.21888 0 94.76096-16.95744 19.456-44.15488 25.86624-66.58048 16.93696v209.38752z m-167.85408-40.96h126.89408V557.75232l48.18944 54.96832c8.04864 9.15456 20.6848 9.07264 28.52864 0.04096 9.728-11.07968 9.70752-29.77792 0.02048-40.83712L512.02048 220.16 203.96032 571.92448c-9.70752 11.07968-9.70752 29.73696-0.02048 40.77568 8.00768 9.13408 20.60288 9.1136 28.52864 0.02048l48.20992-54.96832v267.32544h126.91456V585.40032H616.448v239.67744z"
                  fill="#070606"
                  p-id="5363"
                ></path>
              </svg>
              <span>所属部门</span>
            </div>
            <span>{{ personInfo.deptName }}</span>
          </div>
          <div class="item">
            <div class="left">
              <svg
                t="1715823294309"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6436"
                width="16"
                height="16"
              >
                <path
                  d="M576 597.333333v-21.333333c0-11.733333-9.6-21.333333-21.333333-21.333333h-85.333334c-11.733333 0-21.333333 9.6-21.333333 21.333333v21.333333c0 11.733333 9.6 21.333333 21.333333 21.333334h12.8l-33.28 124.16c-0.426667 2.346667 0 4.906667 1.493334 6.826666l51.413333 68.693334a12.8 12.8 0 0 0 20.48 0l51.413333-68.693334c1.493333-1.92 1.92-4.48 1.493334-6.826666L541.866667 618.666667h12.8c11.733333 0 21.333333-9.6 21.333333-21.333334zM512 533.333333c-105.6 0-192-86.4-192-192v-85.333333c0-105.6 86.4-192 192-192s192 86.4 192 192v85.333333c0 105.6-86.4 192-192 192z"
                  p-id="6437"
                ></path>
                <path
                  d="M773.12 576l-48.64-10.666667c-8.96-1.92-18.346667 2.133333-22.826667 10.24l-176.426666 315.946667c-5.76 10.24-20.693333 10.24-26.453334 0l-181.12-324.266667a20.757333 20.757333 0 0 0-22.826666-10.24L208.213333 576A127.914667 127.914667 0 0 0 106.666667 701.226667V853.333333c0 47.146667 38.186667 85.333333 85.333333 85.333334h597.333333c47.146667 0 85.333333-38.186667 85.333334-85.333334v-152.106666c0-60.586667-42.453333-112.853333-101.546667-125.226667z"
                  p-id="6438"
                ></path>
              </svg>
              <span>所属角色</span>
            </div>
            <template v-for="(item, index) in personInfo.roleNameList" :key="index">
              <span>{{ item }}</span>
            </template>
          </div>
          <div class="item">
            <div class="left">
              <svg
                t="1715823318030"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="7551"
                width="16"
                height="16"
              >
                <path
                  d="M285.696 134.144q0 14.336-9.216 22.528t-22.528 8.192q-12.288 0-20.992-8.704t-8.704-24.064l-1.024-70.656q0-17.408 9.216-26.112t21.504-8.704q13.312 0 22.528 9.216t9.216 26.624l0 71.68zM925.696 325.632l-843.776 0 0-106.496q0-30.72 17.408-50.176t48.128-19.456l709.632 0q37.888 0 53.248 18.944t15.36 48.64l0 108.544zM925.696 734.208q0 32.768-6.144 56.832t-20.48 39.936-38.4 23.552-59.904 7.68l-592.896 0q-72.704 0-99.328-33.792t-26.624-102.4l0-328.704 843.776 0 0 336.896zM520.192 601.088q-10.24 0-17.408 7.168t-7.168 17.408 7.168 17.408 17.408 7.168 17.408-7.168 7.168-17.408-7.168-17.408-17.408-7.168zM551.936 547.84l77.824 0q16.384 0 22.016 15.36t-13.824 34.816q-19.456 18.432-34.816 36.864t-25.6 43.008q-8.192 21.504-8.192 38.912t1.024 24.576q3.072 20.48 25.6 20.48 8.192 0 11.776-6.656t3.584-14.848q0-4.096 0.512-13.824t3.072-20.992 7.68-23.552 13.312-21.504q16.384-18.432 36.864-37.888t27.648-39.936q3.072-10.24 2.56-23.04t-5.632-23.552-14.848-18.432-23.04-8.704q-10.24-1.024-24.576-1.024l-30.72 0q-15.36 0-28.16 0.512t-18.944 0.512q-11.264 0-16.384 6.656t-6.144 11.776q0 6.144 4.608 13.312t12.8 7.168zM356.352 543.744q5.12-2.048 12.288-2.048t14.336 2.56 13.312 8.192 9.216 14.848q3.072 14.336-4.608 27.648t-15.872 17.408q-9.216 5.12-8.192 14.336t8.192 13.312q6.144 4.096 13.312 8.192t12.288 18.432q1.024 6.144 0.512 14.848t-4.608 16.896-11.264 14.848-18.432 8.704q-21.504 4.096-33.792-6.144t-14.336-17.408q-3.072-8.192-10.24-10.752t-13.312-0.512q-9.216 2.048-11.776 11.264t-0.512 14.336 9.728 17.408 29.184 23.552q10.24 6.144 27.648 7.68t34.816-2.048 33.28-14.848 24.064-31.744q7.168-17.408 6.144-32.256t-5.632-25.6-10.24-16.896-6.656-8.192q-5.12-5.12-4.608-10.752t5.632-10.752q6.144-9.216 9.216-18.432t2.048-23.552q0-7.168-2.56-16.896t-9.728-18.432-18.944-15.872-31.232-10.24-34.304 1.536-25.6 12.288-16.896 16.384-8.192 12.8q-4.096 9.216-1.024 18.944t11.264 11.776 12.8-2.048 7.68-9.216q2.048-5.12 8.192-11.776t17.408-11.776zM783.36 133.12q0 14.336-8.704 23.04t-20.992 8.704q-13.312 0-22.016-8.192t-8.704-23.552l0-75.776q0-17.408 8.704-24.064t22.016-6.656q12.288 0 20.992 7.68t8.704 25.088l0 73.728z"
                  p-id="7552"
                ></path>
              </svg>
              <span>创建日期</span>
            </div>
            <span>{{ getDate(personInfo.createTime) }}</span>
          </div>
        </div>
      </template>
    </el-card>
  </div>
</template>

<style scoped lang="less">
.person {
  .el-card {
    width: 310px;

    .avatar {
      display: flex;
      justify-content: center;

      img {
        margin: 0 auto;
        width: 120px;
        height: 120px;
        border-radius: 50%;
      }
    }
  }

  .info {
    .item {
      padding: 10px;
      border-bottom: 1px solid #e7eaec;
      display: flex;
      justify-content: space-between;
      font-size: 13px;

      .left {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
